<template>
  <div>
    <h3 v-coler="coler" >自定义指令</h3>
    <button @click="color ='red'">点击变颜色</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      coler:'#087'
    }
  },
  directives:{

    focus:{
      inserted(el){
        console.log(el);
        el.focus()
      },
    },

    coler:{
      inserted(el,binding){
        el.style.color= binding.value
      },
      update(el,{value}){
        console.log(value);
        el.style.color = value
      },
    },
  },
  // directives: {
  //   // 自定义一个局部指令
  //   focus: {
  //     inserted (el) {
  //       el.focus()
  //     }
  //   }
  // }
}
</script>